<template>
  <view class="page">
    <Navbar title="重置密码" occupy>
      <u-icon slot="left" name="arrow-left" color="#fff" />
    </Navbar>
    <view class="page-body">
      <image :src="webSrc('/profile/static/icon-login-bg.png')" mode="scaleToFill" />
      <view class="tips">重置密码</view>
      <u-text text="手机号" color="#313131" size="28rpx" margin="0 0 20rpx 0" />
      <u-input
        v-model="userForm.phone"
        placeholder="请输入您的手机号"
        placeholder-style="color: #909090; font-size: 24rpx;"
        maxlength="11"
        color="#313131"
        font-size="28rpx"
        border="none"
        clearable
      />
      <u-text text="验证码" color="#313131" size="28rpx" margin="40rpx 0 20rpx 0" />
      <u-input
        v-model="userForm.code"
        placeholder="请输入短信验证码"
        placeholder-style="color: #909090; font-size: 24rpx;"
        maxlength="6"
        type="password"
        color="#313131"
        font-size="28rpx"
        border="none"
        password
        clearable
      >
        <template slot="suffix">
          <u-code ref="uCode" @change="codeChange" seconds="60" />
          <u-button @click="getCode" :text="codeText" type="success" size="mini" />
        </template>
      </u-input>
      <u-text text="密码" color="#313131" size="28rpx" margin="40rpx 0 20rpx 0" />
      <u-input
        v-model="userForm.password"
        placeholder="请设置登录密码"
        placeholder-style="color: #909090; font-size: 24rpx;"
        maxlength="20"
        type="password"
        color="#313131"
        font-size="28rpx"
        border="none"
        password
        clearable
      />
      <u-text text="确认密码" color="#313131" size="28rpx" margin="40rpx 0 20rpx 0" />
      <u-input
        v-model="userForm.password2"
        placeholder="请再次输入登录密码"
        placeholder-style="color: #909090; font-size: 24rpx;"
        maxlength="20"
        type="password"
        color="#313131"
        font-size="28rpx"
        border="none"
        password
        clearable
      />
      <view class="btn f f-ac f-jc" :class="{ disabled: disabled }" @click="handleSubmit">
        确认
      </view>
    </view>
  </view>
</template>
<script>
export default {
  data() {
    return {
      userForm: {
        phone: "", // 账户
        code: "", // 验证码
        password: "", // 密码
        password2: "", // 确认密码
      },
      codeText: "", // 提示信息
    };
  },
  computed: {
    disabled() {
      const { phone, code, password, password2 } = this.userForm;
      return phone == "" || code == "" || password == "" || password2 == "";
    },
  },
  methods: {
    // 修改验证码倒计时
    codeChange(text) {
      this.codeText = text;
    },
    // 发送验证码
    getCode() {
      if (this.$refs.uCode.canGetCode) {
        // 模拟向后端请求验证码
        uni.showLoading({
          title: "正在获取验证码",
        });
        setTimeout(() => {
          uni.hideLoading();
          // 这里此提示会被this.start()方法中的提示覆盖
          uni.$u.toast("验证码已发送");
          // 通知验证码组件内部开始倒计时
          this.$refs.uCode.start();
        }, 2000);
      } else {
        uni.$u.toast("倒计时结束后再发送");
      }
    },
    // 提交表单
    handleSubmit() {
      if (this.disabled) return;
      uni.showToast({
        title: "重置成功，请重新登录",
        icon: "none",
        mask: true,
        success: () => {
          setTimeout(() => {
            uni.navigateBack({ delta: 1 });
          }, 1500);
        },
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.page {
  height: 100vh;
  overflow: hidden;
  padding: 30rpx;
  background: linear-gradient(90deg, #24de73 0%, #157dfa 100%);
  .page-body {
    position: fixed;
    height: 75%;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: #fff;
    border-top-right-radius: 60rpx;
    padding: 40rpx;
    box-sizing: border-box;
    > image {
      width: 263rpx;
      height: 346rpx;
      position: absolute;
      top: -240rpx;
      right: 80rpx;
    }
    .tips {
      position: absolute;
      top: -72rpx;
      left: 40rpx;
      font-size: 36rpx;
      font-weight: 600;
      color: #fff;
      &::after {
        content: "";
        display: inline-block;
        position: absolute;
        top: -10rpx;
        right: -20rpx;
        width: 10rpx;
        height: 10rpx;
        border-radius: 50%;
        border: 6rpx solid #c5e393;
      }
    }
    ::v-deep .u-input {
      padding: 20rpx !important;
      background-color: #f5f5f5;
      border-radius: 16rpx !important;
    }
    .btn {
      margin-top: 140rpx;
      height: 96rpx;
      width: 100%;
      background-color: #24de73;
      border-radius: 60rpx;
      font-size: 32rpx;
      color: #fff;
      font-weight: 600;
      &:active {
        background-color: #25ca6a;
      }
    }
    .disabled {
      color: #909090;
      background-color: #ebebeb;
      pointer-events: none;
      &:active {
        background-color: #ebebeb;
      }
    }
  }
}
</style>
